<template>
	<view class="page">
		<view class='bigTitle'>中德教育产业园</view>
		<view class="card">
			<view class="top">
				<view class="checked" @click="change(true)">登录</view>
			</view>
			<view class="middle">
				<view class="inputContainer">
					<view style="display:flex;flex-direction: row;align-items: center;width:120px;"><uni-icons
							type="staff" size="22"></uni-icons>账号</view>
					<view><input placeholder="请输入账号" v-model="login.username" class="uniInput" /></view>
				</view>
				<view class="inputContainer">
					<view style="display:flex;flex-direction: row;align-items: center;width:120px;"><uni-icons
							type="locked" size="22"></uni-icons>密码</view>
					<view><input placeholder="请输入密码" v-model="login.password" class="uniInput" password="true" /></view>
				</view>
			</view>
			<view class="bottom">
				<view>
					<button class="but" @click="toLogin">登录</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { login, getIdentity } from '@/common/api/login.js'
	export default {
		data() {
			return {
				login: {
					username: 'admin', //'test',//'laoshi1',//'admin', //'maintainer',
					password: '123456', //'@Tcict1',//'123456' //'Tcict123456$',
				}
			}
		},
		mounted() {
		},
		methods: {
			toLogin() {
				login(this.login).then(res => {
					console.log(res, 'res?')
					uni.setStorageSync('App-Token', `${res.data.access_token}`)
					getIdentity().then((infoRes) => {
						console.log('info', infoRes)
						let info = JSON.stringify(infoRes.data)
						// 保存权限信息
						uni.setStorageSync('info', info)
						// 页面跳转
						uni.redirectTo({
						  url: '/pages/index/index' // 替换为你的登录页面路径
						});
					})
				})
			},
		}
	}
</script>


<style lang="less">
	.page {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-image: url('@/static/login.png');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		.bigTitle {
			font-size: 8vw;
			font-weight: bold;
			color: #fff;
			margin-bottom: 3vh;
			text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 阴影效果 */
		}
	}

	.card {
		width: 80%;
		height: 50vh;
		border: 1px solid #c8c8c8;
		border-radius: 10px;
		box-shadow: 4px 4px rgba(212, 212, 212, 0.4);
		background-color: #fff;
	}

	.top {
		width: 100%;
		height: 10vh;
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		align-items: center;
		font-size: 22px;
	}

	.checked {
		color: #5999ff;
		border-bottom: 4px solid #5999ff;
	}

	.middle {
		width: 100%;
		// border: 1px solid red;
		height: 20vh;
		margin-top: 10px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 18px;
	}

	.inputContainer {
		width: 85%;
		height: 40%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.uniInput {
		font-size: 16px;
		border-bottom: 1px solid #efefef;
		margin-top: 10px;
		padding-bottom: 10px;
	}

	.bottom {
		width: 100%;
		margin-top: 10px;
		height: 80px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.tip1 {
		width: 90%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		font-size: 16px;
		margin-bottom: 10px;
	}

	.tip2 {
		width: 90%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		color: #5999ff;
		font-size: 16px;
		margin-bottom: 10px;
	}

	.but {
		font-size: 14px;
		background-color: #5999ff;
		color: #fff;
		padding: 2px 45px;
		border-radius: 35px;
	}
</style>